<template>
  <div class="test-container">
    <!-- 流程图 -->
    <div class="mermaid" ref="mermaidRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUpdated } from 'vue';
//导入流程图
import mermaid from "mermaid";
mermaid.initialize({ startOnLoad: false });
const mermaidRef = ref()
const props = defineProps({
  initValue: {
    type: String,
    required: false,
    default: ''
  },
})


const update = () =>{
  const insertSvg = (svgCode) => {
    if (mermaidRef.value) mermaidRef.value.innerHTML = svgCode
  }
  console.log('====', mermaidRef.value, props.initValue)
  mermaid.mermaidAPI.render('mermaid', props.initValue, insertSvg)
}



onMounted(()=>{
  update()
})
onUpdated(update);
</script>

<style lang="scss">
.test-container {
  text-align: center;
  width: 100%;
  height: 100%;
  .mermaid {
    height: auto;
    width: 500px;
    margin: 20px auto;
    padding: 30px;
    border: 1px solid #ccc;
  }
}
</style>